<template>
  <div class="Header">
    <div class="logo_box">
      <div class="logo">
        <img src="../assets/logo.png" alt="" />
      </div>
      <span>XXX后台管理系统</span>
    </div>
    <!-- <span>头部</span> -->

    <el-button-group class="btn_btn">
      <el-button
        type="primary"
        class="BtnNoBack"
        @click="yi_msg()"
        :class="{ active: isActive }"
        icon="el-icon-edit"
        >系统设置</el-button
      >
      <el-button
        type="primary"
        class="BtnNoBack"
        @click="yi_mission()"
        :class="{ active: isActive2 }"
        icon="el-icon-share"
        >内容管理</el-button
      >
      <el-button
        type="primary"
        class="BtnNoBack"
        @click="yi_mission_miss()"
        :class="{ active: isActive3 }"
        icon="el-icon-delete"
        >其他设置</el-button
      >
    </el-button-group>
    <el-button
      class="logoutBtn"
      @click="drawer = true"
      type="primary"
      style="margin-left: 16px"
    >
      我的
    </el-button>
    <el-drawer
      title="我是标题"
      :visible.sync="drawer"
      direction="rtl"
      :with-header="false"
    >
      <div class="drawer_yu">
        <el-button type="primary" @click="logout()">退出登录</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      isActiveVal: '',
      drawer: false,
      isActive: true,
      isActive2: false,
      isActive3: false,
    }
  },
  created() {},
  methods: {
    yi_msg() {
      this.isActiveVal = 1
      this.isActive = true
      this.isActive2 = false
      this.isActive3 = false
      // console.log(this.isActiveVal)
      this.$emit('listenActiveVal', this.isActiveVal)
    },
    yi_mission() {
      this.isActiveVal = 2
      this.isActive = false
      this.isActive2 = true
      this.isActive3 = false
      // console.log(this.isActiveVal)
      this.$emit('listenActiveVal', this.isActiveVal)
    },
    yi_mission_miss() {
      this.isActiveVal = 3
      this.isActive = false
      this.isActive2 = false
      this.isActive3 = true
      // console.log(this.isActiveVal)
      this.$emit('listenActiveVal', this.isActiveVal)
    },
    logout() {
      this.$confirm('确认退出登录？')
        .then((_) => {
          this.removeCache('user')
          this.removeCache('token')
          this.removeCache('router')
          this.$router.push('/login')
        })
        .catch((_) => {})
    },
  },
}
</script>

<style lang="scss">
.Header {
  overflow: auto;
  .logoutBtn {
    float: right;
    margin-top: 10px;
  }
  .drawer_yu {
    padding: 20px;
  }
  .logo_box {
    text-align: left;
    float: left;
    .logo {
      float: left;
      height: 60px;
      margin-right: 10px;
      img {
        height: 60px;
      }
    }
  }
  .btn_btn {
    float: left;
    margin-left: 20px;
    height: 60px;
    button {
      height: 60px;
    }
  }
}
/* #app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
} */
</style>
